<template>
  <el-container style="height: 550px;">
    <el-main>
      <el-descriptions title="路线申请" direction="horizontal" :column="2" border>
        <el-descriptions-item label="申请人">{{realName}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{username}}</el-descriptions-item>
        <el-descriptions-item label="证件号码" :span="2">{{idCard}}</el-descriptions-item>
        <el-descriptions-item label="申请次数">{{applyTimes}}</el-descriptions-item>
        <el-descriptions-item label="大件类型">{{cargoType}}</el-descriptions-item>
        <el-descriptions-item label="申请通行时间" :span="2">{{beginDate+"至"+endDate}}</el-descriptions-item>
        <el-descriptions-item label="途径州市" :span="2">{{passCities}}</el-descriptions-item>
        <el-descriptions-item label="通行路线(未推荐)" :span="2" v-if="whetherUseAdvice===0">{{initRoad}}



        </el-descriptions-item>
        <el-descriptions-item label="通行路线(推荐)" :span="2" v-if="whetherUseAdvice===1">{{suggestRoad}}
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button type="primary" ><el-icon><Search /></el-icon>点击显示地图</el-button>
            </template>
            <approval-map :begin="beginLngLat" :end="endLngLat"></approval-map>
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="货物重量（吨）">{{ cargoWeight }}</el-descriptions-item>
        <el-descriptions-item label="车货总重量（吨）">{{ totalWeight }}</el-descriptions-item>
        <el-descriptions-item label="轴数（个）">{{ truckAxes }}</el-descriptions-item>
        <el-descriptions-item label="轮胎数（个）">{{ truckTyres }}</el-descriptions-item>
        <el-descriptions-item label="车辆目前状态">{{ currentCondition }}</el-descriptions-item>
      </el-descriptions>
      <el-row style="margin-top: 20px;margin-bottom: 20px">
        <el-input
            v-model="whetherPassReason"
            maxlength="50"
            placeholder="请输入审核理由"
            show-word-limit
            type="textarea"
        />
      </el-row>
      <el-row>
        <el-col :span="12"><el-button type="success" @click="isPass(true)">通过</el-button></el-col>
        <el-col :span="12"><el-button type="danger" @click="isPass(false)">不通过</el-button></el-col>
      </el-row>


    </el-main>
  </el-container>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";
import ApprovalMap from "@/components/approvalMap";

export default {
  name:"routeApproval",
  components: {ApprovalMap},
  created() {
    console.log("我"+this.beginLngLat+this.endLngLat)
  },
  methods:{
    isPass:function (a){
      if(a===false&&this.whetherPassReason===''){

        ElMessage.warning('请填写不通过理由！')
      }else{
        let userjson=sessionStorage.getItem('user')
        let user=JSON.parse(userjson)
        axios({
          method: 'post',
          url: '/api/audit/check',
          data: {
            roadApplyId:this.roadApplyLogsId,
            whetherPass:a,
            whetherPassReason:this.whetherPassReason,//理由
            auditorUsername:user.username,
          },
        })
            .then((res)=>{
              console.log(res)
              if(res.data.code==="1"){//返回成功
                // alert("审核成功")
                ElMessage.success('审核成功')
              }else{//返回失败
                // alert("审核失败")
                ElMessage.error('审核失败')
              }
              this.$emit("changeShow",1)
            });
      }
    }
  },
  props:{
      roadApplyLogsId:Number,
      realName:String,
      username:String,
      idCard: String,
      applyTimes: Number,
      cargoType: String,
      beginDate: String,
      endDate: String,
      passCities: String,
      initRoad: String,
      suggestRoad: String,
      cargoWeight: Number,
      totalWeight: Number,
      truckAxes: Number,
      truckTyres: Number,
      currentCondition: String,
      applyDate: String,
      beginLngLat:[],
      endLngLat:[],
      whetherUseAdvice:Number,
  },
  data() {
    return {
      visible: false,
      whetherPassReason:'',

    };
  }
};
</script>

<style scoped>
.el-container{
  height: 540px;
  width: 100%;
}

</style>

